<template>
	<div class="root">
		<div class="card">
			<div class="arrow"><img src="http://qnkf.laigl.com/20210420/arrow.png" alt=""></div>
			<div class="chart1">
				<div :class="check==0?'active':'chart'" id="chart1" @click="changeIndex(0)"></div>
				<p :class="check==0?'fonts_active':'normal'">Programme 1</p>
			</div>
			<div class="chart2">
				<div :class="check==1?'active':'chart'" id="chart2" @click="changeIndex(1)"></div>
				<p :class="check==1?'fonts_active':'normal'">Programme 2</p>
			</div>
			<div class="chart3">
				<div :class="check==2?'active':'chart'" id="chart3" @click="changeIndex(2)"></div>
				<p :class="check==2?'fonts_active':'normal'">Programme 3</p>
			</div>
			<div class="opts">
				<van-icon name="arrow-up" size="1.5rem" />
				<p>选择Programme</p>
			</div>
		</div>
		<div class="backimg"><img src="http://qnkf.laigl.com/mobilepng/back1.png" alt=""></div>
		<div class="sub-button" @click="godetail()">确定</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				check:0
			}
		},
		methods:{
			changeIndex(id){
				console.log(id)
				this.check = id
			},
			godetail(){
				this.$router.push('./article?level_id='+ (Number(this.$route.query.level) + 1) +"&program_id=" + (this.check +1)+"&assess_id="+this.$route.query.assess_id)
			}
		}
	}
</script>

<style scoped lang="less">
	.root{
		width: 100%;
		height: 100vh;
		padding: 2rem;
		overflow: hidden;
		box-sizing: border-box;
		background: url(http://qnkf.laigl.com/mobilepng/questionback.png);
		@keyframes moveArrow {
		    0% {
		        transform: translateY(0);
		        -webkit-transform: translateY(0);
		    }
		    50% {
		        transform: translateY(-1vh);
		        -webkit-transform: translateY(-1vh);
		    }
				100% {
				    transform: translateY(0);
				    -webkit-transform: translateY(0);
				}
		}
		.card{
			width: 23.5rem;
			height: 25.5rem;
			background: #fff;
			overflow: hidden;
			border-radius: 1rem;
			box-shadow: 0 0 3rem #aaa;
			position: relative;
			img{
				width: 5.5rem;
				height: 3.5rem;
				position: absolute;
				top: 6rem;
				left: 6rem;
			}
			.opts{
				position: absolute;
				bottom: 1rem;
				left: 8rem;
				text-align: center;
				i{
					animation: 2s moveArrow infinite ease normal;
				}
			}
		}
		.fonts_active{
			color: #0E9FCA;
		}
		.normal{
			color:#CCD0DB;
		}
		.chart1{
			left: .5rem;
		}
		.chart2{
			left: 7.5rem;
		}
		.chart3{
			left: 14.5rem;
		}
		.chart1,.chart2,.chart3{
			display: inline-block;
			margin:0 .8rem;
			text-align: center;
			box-sizing: border-box;
			position: absolute;
			bottom: 6rem;
			p{
				margin-top: 1rem;
				font-weight: bold;
			}
			.chart{
				background: linear-gradient(to top,#CCD0DB,#F8F8FA);
			}
			.active{
				background: linear-gradient(to top,#CCD0DB,#F8F8FA);
				transition: all .5s;
				position: relative;
				p{
					color: #0E9FCA;
				}
			}
			.active::after{
				content:'';
				width: 100%;
				border-radius: 0.3rem;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				animation: changeBack .5s cubic-bezier(0.54, 1.41, 1, 1) both;
			}
			@keyframes changeBack{
				0%{
					height: 0;
					background: linear-gradient(to top,#CCD0DB,#F8F8FA);
				}
				100%{
					background: linear-gradient(to top,#0489C4,#1BBFD0);
					height: 100%;
				}
			}
			#chart1{
				width: 3rem;
				height: 5rem;
				margin-left: 1.3rem;
				border-radius:.3rem;
			}
			#chart2{
				width: 3rem;
				height: 8rem;
				margin-left: 1.3rem;
				border-radius:.3rem;
			}
			#chart3{
				width: 3rem;
				height: 12rem;
				margin-left: 1.3rem;
				border-radius:.3rem;
			}
		}
		.backimg{
			margin-top: 1rem;
			width: 100vw;
			margin-left: -2rem;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.sub-button{
			width: 23rem;
			height: 3.8rem;
			box-sizing: border-box;
			background: linear-gradient(to right, #1FCAD1, #0383C4);
			border: none;
			outline: none;
			border-radius: 3rem;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 1.4rem;
		}
	}
</style>
